<template>
	<view>
		<u-popup :show="show" :round="10" mode="center" @open="open">
			<view class="pwd-popup">
				<view>
					<u-icon name="close" size="24" @click.native.stop="close"></u-icon>
				</view>
				<view class="text-bold font-18 text-black0">请输入短信验证码</view>
				<view class="padding text-black9">输入您的短信验证码进行支付</view>
				<view class="margin-tb-lg padding-bottom">
					<u-code-input v-model="code" :maxlength="6" focus :dot="isCiphertext" @finish="finish"></u-code-input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "payPassward",
		props: {
			show: Boolean
		},
		data() {
			return {
				code: '',
				isCiphertext: false
			};
		},
		methods: {
			open() {
				this.code = ''
				this.isCiphertext = false
			},
			showCode() {
				this.isCiphertext = !this.isCiphertext
			},
			close() {
				this.$emit('close')
			},
			finish() {
				this.$emit('pay', this.code)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
.pwd-popup {
	border-radius: 40rpx;
	padding: 40rpx;
	text-align: center;
	
	.pwd-icon {
		width: 160rpx;
		height: 160rpx;
	}
	
	.eye {
		width: 34rpx;
		height: 20rpx;
		margin-left: 12rpx;
	}
}

::v-deep .u-code-input__item {
	width: 72rpx !important;
	height: 92rpx !important;
	border: 2rpx solid #E00000 !important;
	color: #E00000 !important;
	margin-right: 24rpx !important;
	position: relative !important;
	border-radius: 10rpx !important;
	
	text {
		font-size: 60rpx !important;
		color: #E00000 !important;
	}
}
::v-deep .u-code-input__item__dot{
	background-color: transparent !important;
	width: 100% !important;
	height: fit-content !important;
}
::v-deep .u-code-input__item__dot::after{
	content: '*';
	font-size: 62rpx;
}
</style>